<template>
  <div>
    <div class="header">
      <h3>教研进度</h3>
    </div>
    <div id="trChart" ref="trChart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { teachingResearchCountApi } from '@/api/workbench'

export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.trChart)
      teachingResearchCountApi().then(res => {
        let researchTypeName = []
        console.log(res);
        res.data.forEach(item => {
          console.log(item);
          if (item.researchTypeName == '专利') {
            if (item.statusName == '已完成') {
              
            }
            
          }
          researchTypeName.push(item.researchTypeName)
        });
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            y:'bottom',
            data: ['已完成', '未完成'],
          },
          xAxis: {
            type: 'category',
            data: ['论文申报', '论文发表', '技能大赛', '课题研究']
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '已完成',
              type: 'bar',
              barWidth: 30,
              data: [18, 23, 29, 10, 13, 60],
              itemStyle: {
                color: '#F69F2D'
              }
            },
            {
              name: '未完成',
              type: 'bar',
              barWidth: 30,
              data: [19, 23, 31, 13, 13, 87],
              itemStyle: {
                color: '#BD92E0'
              }
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}
.chart-container {
  width: 100%;
  height: 400px;
}
</style>